<template>
	<div>
	<el-dialog 
		title="附件上传列表" 
		:visible.sync="dialogTableVisible"
		@close="onDialogClose">
	  <el-table :data="fileShowList">
		<el-table-column property="name" label="文件名" width="200" :show-overflow-tooltip="true"></el-table-column>
		<el-table-column property="percent" label="上传进度" width="200" type="index">
			<template slot-scope="scope">
				<el-progress :text-inside="true" :stroke-width="16" :percentage="fileShowList[scope.$index].percent" status="success"></el-progress>
            </template>
		</el-table-column>
		<el-table-column label="状态" width="150" align="center">
			<template slot-scope="scope">
				<span style="font-size: 12px;" :style="{color:uploadStatusMap[fileShowList[scope.$index].status].color}">{{uploadStatusMap[fileShowList[scope.$index].status].text}}</span>
			</template>
		</el-table-column>
		<el-table-column label="操作">
			<template slot-scope="scope">
				<el-button :data-index="scope.$index" type="danger" size="mini" :round="true" :disabled="isDelDisabled" icon="el-icon-delete" @click="onFileDel"></el-button>
			</template>
		</el-table-column>
	  </el-table>
	  <div style="margin-top: 20px;">
		 <el-button  @click="onUpload" type="primary">上传</el-button>
		 <el-button  @click="onResetFiles" type="primary" >重选</el-button>
	  </div>
	  
	</el-dialog>
	<el-upload
	  class="upload-demo"
	  ref="upload"
	  action="https://jsonplaceholder.typicode.com/posts/"
	  :multiple="true"
	  :auto-upload="false"
	  :show-file-list="false"
	  :before-upload="beforeUpload"
	  :limit="5"
	  :on-exceed="handleExceed"
	  :on-change="handleChange"
	  :on-progress="handleProgress"
	  :on-error="handleError">
  <el-button size="small" type="primary" ref="uploadBtn" slot="trigger">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</div>
</template>

<script>
	const uploadStatusMap = {
		'ready':{
			text:'准备上传',
			color:'#409EFF'
		},
		'success':{
			text:'上传成功',
			color:'#67C23A'
		},
		'fail':{
			text:'上传失败',
			color:'#F56C6C'
		},
		'uploading':{
			text:'正在上传...',
			color:'#909399'
		}
	}
	export default {
    data() {
      return {
		uploadStatusMap:uploadStatusMap,
		fileShowList:[],
		dialogTableVisible:false,
		isDelDisabled:false,
      };
    },
	watch:{
		fileShowList:{
			deep:true,
			handler(newItem){
				if (newItem[0].status === 'success') {
					this.isDelDisabled = true;
				}else{
					this.isDelDisabled = false;
				}
			}
		}
	},
    methods: {
	  //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
	  //添加文件status:ready  上传成功status：success
	  handleChange(file, fileList){
		 // console.log(file,fileList)
		 if(file.status === 'ready'){
			 this.dialogTableVisible = true;
			 this.fileShowList = fileList.map(file => {
				 file.percent = 0;
				 return file;
			 });
		 }
	  },
	  
	  //文件超出限制个数
	  handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 5 个文件`);
      },
	  
	  // 上传进度钩子
	  handleProgress(event, file, fileList){
		this.fileShowList.forEach(fileItem => {
			if(fileItem.uid === file.uid){
				fileItem.percent = parseInt(event.percent);
				fileItem.status = event.status;
			}
		
		});
	  },
	  
	  //上传错误钩子
	  handleError(err,file){
		this.$message.error(`文件"${file.name}“上传失败`);
	  },
	  
	  beforeUpload(file){
        const isLt2M = file.size / 1024  < 500;
        if (!isLt2M) {
          this.$message.error(`文件"${file.name}“大小不能超过 500K!`);
        }
        return isLt2M;
		 
	  },
	  onDialogClose(){
		  this.$refs.upload.clearFiles();
	  },
	  onUpload(){
		  this.$refs.upload.submit();
	  },
	  onFileDel(e){
		const index = e.target.dataset.index;
		//从文件列表中删除
		this.$refs.upload.uploadFiles.splice(index,1);
		//从视图删除
		this.fileShowList.splice(index,1);
	  },
	  onResetFiles(){
		//清空文件列表
		this.$refs.upload.clearFiles();
		//模拟点击事件
		this.$refs.uploadBtn.$el.click()
	  }
    }
	
  }
</script>

<style>
</style>
